<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI Datagrid</title>
<link rel="stylesheet" type="text/css" href="../easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../easyui-1.3.5/themes/icon.css" />
<script src="../easyui-1.3.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui-1.3.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
	$('#test').datagrid({
		title: 'My Title',
		iconCls: 'icon-save',
		width: 800,
		height: 450,
		nowrap: true,
		striped: true,
		url: 'datagrid_data.json',
		sortName: 'code',
		sortOrder: 'desc',
		idField: 'code',
		columns: [
			[{
					title: '姓名',
					field: 'name'
				},
				{
					field: 'sex',
					title: '性别',
				}
			],
		],
		pagination: true,
		rownumbers: true,
		singleSelect: true,
		//事件调用的方式
		onLoadSuccess: function() {
			alert('load data successfully!');
		},
		toolbar: [{ //设置工具条，该工具条中设置了三个功能按钮
			text: 'Add', //标题为’Add’的工具条按钮
			iconCls: 'icon-add', //工具条按钮显示的图标
			handler: function() { //工具条按钮实现的功能函数
				alert('add')
			}
		}, {
			text: 'Cut', //标题为’Cut’的工具条按钮
			iconCls: 'icon-cut',
			disabled: true,
			handler: function() {
				alert('cut')
			}
		}, '-', {
			text: 'Save',
			iconCls: 'icon-save',
			handler: function() {
				alert('save')
			}
		}]
	});
	//获取页面分页对象
	var p = $('#test').datagrid('getPager');
	if(p) {
//		$(p).pagination({ //设置分页功能栏
//			//分页功能可以通过Pagination的事件调用后台分页功能来实现
//			onBeforeRefresh: function() {console.log('onBeforeRefresh');},
//			onSelectPage:function(){console.log("onSelectPage");},
//			onRefresh:function(){console.log("onRefresh");},
//			onChangePageSize:function(){console.log("onChangePageSize");}
//		});
		
		p.pagination({ //设置分页功能栏
			//分页功能可以通过Pagination的事件调用后台分页功能来实现
			onBeforeRefresh: function() {console.log('onBeforeRefresh');},
			onSelectPage:function(){alert("onSelectPage");},
			onRefresh:function(){console.log("onRefresh");},
//			onChangePageSize:function(){console.log("onChangePageSize");}
		});
	}
});

function resize() {
	$('#test').datagrid({
		title: 'New Title',
		striped: true,
		width: 650,
		queryParams: {
			p: 'param test',
			name: 'My Name'
		}
	});
}
//获取Datagrid Options对象属性的方式
function getGridProperty() {
	//先获取Options对象，然后通过Options获取其属性
	var optionsObj = $('#test').datagrid('options');
	var queryParams = optionsObj.queryParams;
}
//以下为调用Datagrid的函数的自定义方法
function getSelected() {
	var selected = $('#test').datagrid('getSelected');
	alert(selected.code + ":" + selected.name);
}

function getSelections() {
	var ids = [];
	var rows = $('#test').datagrid('getSelections');
	for(var i = 0; i < rows.length; i++) {
		ids.push(rows[i].code);
	}
	alert(ids.join(':'))
}

function clearSelections() {
	$('#test').datagrid('clearSelections');
}

function selectRow() {
	$('#test').datagrid('selectRow', 2);
}

function selectRecord() {
	$('#test').datagrid('selectRecord', '002');
}

function unselectRow() {
	$('#test').datagrid('unselectRow', 2);
}
</script>

</head>

<body>

<h1>DataGrid</h1>

<div style="margin-bottom: 10px;">
	<a href="#" onclick="resize()">resize</a>
	<a href="#" onclick="getSelected()">getSelected</a>
	<a href="#" onclick="getSelections()">getSelections</a>
	<a href="#" onclick="clearSelections()">clearSelections</a>
	<a href="#" onclick="selectRow()">selectRow</a>
	<a href="#" onclick="selectRecord()">selectRecord</a>
	<a href="#" onclick="unselectRow()">unselectRow</a>
</div>
<table id="test"></table>
</body>

</html>